<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
	<script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
	const root = ReactDOM.createRoot(document.querySelector("#root"));
	class App extends React.Component{
		constructor() {
			super();
			this.state = {
				num:100,
				username:"zhangsan"
			}
		}
		render(){
			// console.log("render",this.state.num);
			return (
				<h3 onClick={()=>{
					// 1- setState是异步驱动视图的
					// this.setState做什么事？
					// 答：1- 更改数据状态  2- 调用组件render, 根据数据状态将视图的内容进行更新
					//    这两件事是异步操作。
					// this.setState({
					// 	num:this.state.num+1
					// });
					// // 100  App--100
					// console.log(this.state.num,document.querySelector("h3").innerText);
					
					
					// 2- 如果有多个数据发生改变视图只更新一次
					// this.setState({
					// 	num:this.state.num+1
					// })
					// this.setState({
					// 	username:this.state.username+"!"
					// })
					
					// 下方代码与上方是等价的关系。
					// this.setState({
					// 	num:this.state.num+1,
					// 	username:this.state.username+"!"
					// })
					
					// 3- this.setState是更改数据的唯一正途
					// this.state.num+=1;
					// this.setState({
					// 	num:this.state.num
					// })
					
					// 以下代码干了两件事：
					// 1- this.setState({num:100})
					//    this.state.num+=1;// 101
					// this.setState({
					// 	num:this.state.num++
					// })
					
					// 2
					// this.state.num+=1;// 101
					// this.setState({num:101})
					// this.setState({
					// 	num:++this.state.num
					// })
					
					// 3
					// this.state.num的值是100
					// this.setState({num:101})
					// this.setState({
					// 	num:this.state.num+1
					// });
					// // this.setState({num:101})
					// this.setState({
					// 	num:this.state.num+1
					// });
					// // this.setState({num:101})
					// this.setState({
					// 	num:this.state.num+1
					// });
					
					// 4
					// this.setState({
					// 	num:this.state.num+1
					// },()=>{
					// 	// 当数据以及视图更新完毕之后执行
					// 	console.log(this.state.num,document.querySelector("h3").innerText)
					// });
					
					// 回调地狱
					// this.setState({
					// 	num:this.state.num+1
					// },()=>{
					// 	this.setState({
					// 		num:this.state.num+1
					// 	},()=>{
					// 		this.setState({
					// 			num:this.state.num+1
					// 		})
					// 	})
					// })
					
					// 5- setState可以接收一个对象，也可以接收一个函数
					// this.setState({
					// 	num:this.state.num+1
					// });
					// // 回调函数接收一个参数，该参数即是修改以后的值
					// this.setState(prevState=>{
					// 	// this.state: 当前的数据状态
					// 	// prevState:是将当前的数据状态更改的值
					// 	// console.log(prevState===this.state);// false
					// 	return {
					// 		num:prevState.num+1
					// 	}
					// });
					// this.setState(prevState=>({
					// 	num:prevState.num+1
					// }))
					
					this.setState({
						num:1
					})
					// 如果要更改数据状态，但是状态需要在上一次更改的基础上进行操作，那么使用函数的形式。
					this.setState((prevState)=>{
						// prevState === this.state;// false
					});
				}}>App--{this.state.num}--{this.state.username}</h3>
			)
		}
	}
	root.render(<App/>)
</script>
</html>